<template>
  <div class="container">
    <div class="container1" v-if="containerShow">
      <div class="banner">
        <img src="../../../static/img/buyCar/buy_banner.png" alt="">
      </div>
      <div class="lookup">
        <div class="search">
          <p>
            <router-link to="/home">首页</router-link> > <router-link to="/buyCar">我要买车 </router-link>
          </p>
          <div>
            <input type="text" v-model='inputVal' @keyup.enter="search" placeholder="请输入品牌车型">
            <i @click="search"></i>
          </div>
        </div>
        <div class="screen">
          <div class="screen_box">
            <div>拍卖方式 :</div>
            <ul>
              <li @click="oFn1('')" :style="{color:parameter.type === '' ? '#ff6f3c' : ''}">不限</li>
              <li @click="oFn1('0')" :style="{color:parameter.type==='0'?'#ff6f3c': ''}">投标</li>
              <li @click="oFn1('1')" :style="{color:parameter.type==='1'?'#ff6f3c': ''}">竞拍</li>
            </ul>
          </div>
          <div class="screen_box">
            <div>状 &nbsp; &nbsp; &nbsp; 态 :</div>
            <ul>
              <li @click="oFn2('')" :style="{color:parameter.state==''?'#ff6f3c':''}">不限</li>
              <li @click="oFn2('0')" :style="{color:parameter.state=='0'?'#ff6f3c':''}">等待中</li>
              <li @click="oFn2('1')" :style="{color:parameter.state=='1'?'#ff6f3c':''}">进行中</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="buyList" v-if="newListLength > 0">
        <div class="synopsis" @click="toPath(item)" v-for="(item) in newList.content" :key="item.id">
        <!-- <div class="synopsis" v-for="(item) in newList.content" :key="item.id"> -->
          <!-- <router-link :to="{path:'/buyCar'}" tag="p"> -->
            <div class="photo" v-bind:style="{
              'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic + ') no-repeat center center',
              'backgroundSize': '100% auto'
            }">
              <img v-if="item.status == 0" class="label" src="../../../static/img/home/home_bidding.png" alt="">
              <img v-if="item.status == 7" class="label" src="../../../static/img/home/home_wait_for_bid.png" alt="">
              <img v-if="item.status == 2" class="label" src="../../../static/img/home/home_auctioning.png" alt="">
              <img v-if="item.status == 5" class="label" src="../../../static/img/home/home_wait_for_auction.png" alt="">
              <div class="collect" @click="solicitudeFn(item.id, $event)">
                <img v-if="item.focus == 0" src="../../../static/img/home/btn_guanzhu_nor.png" alt="">
                <img v-if="item.focus == 1" src="../../../static/img/home/btn_guanzhu_sel.png" alt="">
              </div>
              <!-- <img class="bg" :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic" alt=""> -->
              <div class="license">
                【{{item.storage}}】{{item.plate_number}}
              </div>
            </div>
            <p class="brand wm">
              {{item.car_style}}
            </p>
            <p class="travel wm">{{item.mileage}}万公里|{{item.register_date}}上牌</p>
            <div class="auction wm">
              <p class="numberOfPeople" v-if="item.status == 0 || item.status == 7">
                <span class="num">{{item.tenderPersonNumbers?item.tenderPersonNumbers:0}}</span>
                <span>人出价</span>
              </p>
              <p class="numberOfPeople" v-if="item.status == 2 || item.status == 5">
                <span class="num">{{item.auction_price?item.auction_price:0}}</span>
                <span>万元起</span>
              </p>
              <p class="startTime">
                <span class="tim">{{item.start_time.substring(0,16)}}</span>
                <span>开始</span>
              </p>
            </div>
          <!-- </router-link> -->
        </div>
      </div>
      <div v-else class="buyListX">
        <img src='../../../static/img/PersonalCenter/img_car_nodata.png'>
        <p>暂无车辆</p>
      </div>
      <pagination class="pagination" :page-size="pageSize" :item-count="totalCount" @gotopage="gotopage"></pagination>
    </div>
    <router-view/>
  </div>
</template>
<script>
import pagination from '../../components/pagination.vue'
export default {
  data () {
    return {
      newList: '',
      searchInput: '',
      totalCount: '',
      pageSize: '',
      inputVal: '',
      newListLength: '',
      parameter: {
        type: '',
        state: '',
        index: '1',
        pageSize: '24',
        query: '',
        userId: ''
      },
      userLis: '',
      ifSolicitudeFn: true,
      containerShow: true
    }
  },
  mounted () {
    window.scrollTo(0, 0)
    this.inputVal = this.$route.params.inputVals
    this.parameter.query = this.$route.params.inputVals
    this.getFinanceData()
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.parameter.userId = jsonObj.data.data.user.id
      this.userLis = jsonObj.data.data.user
    }
    if (location.hash === '#/buyCar') {
      this.containerShow = true
    } else {
      this.containerShow = false
    }
  },
  components: {pagination},
  watch: {
    parameter: {
      handler: function (val, oldVal) {
        this.getFinanceData()
      },
      deep: true
    },
    '$route' () {
      this.parameter.query = this.$route.params.inputVals
      this.inputVal = this.$route.params.inputVals
      if (location.hash === '#/buyCar') {
        this.containerShow = true
      } else {
        this.containerShow = false
      }
    }
  },
  methods: {
    // 添加关注
    solicitudeFn (x, eve) {
      // 阻止时间冒泡
      eve.cancelBubble = true
      // 获取当前URL
      let urls = window.location.href
      // 判断是否登陆
      if (this.userLis.id && this.userLis.id !== '') {
        let httpUrl = ''
        if (this.ifSolicitudeFn) {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/addFoucus?x=' + new Date().getTime()
        } else {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/unsubscribe?x=' + new Date().getTime()
        }
        let _this = this
        // 读取本地
        let storage = window.sessionStorage
        let json = storage.getItem('WSKuserLis')
        let jsonObj = JSON.parse(json)
        if (jsonObj) {
          this.userLis = jsonObj.data.data.user
        }
        this.$http({
          url: httpUrl,
          params: {
            userId: this.userLis.id,
            carId: x
          },
          headers: {'from': 'web'}
        }).then(r => {
          _this.getFinanceData()
          _this.ifSolicitudeFn = !_this.ifSolicitudeFn
        })
      } else {
        // 把当前url保存到本地
        let use = JSON.stringify(urls)
        let storage = window.sessionStorage
        storage.setItem('WSKpathHerf', use)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    getFinanceData () {
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/searchResult?x=' + new Date().getTime(),
        params: this.parameter,
        headers: {'from': 'web'}
      }).then(r => {
        this.newList = r.data.data
        this.totalCount = this.newList.totalElements
        this.pageSize = this.newList.size
        this.newListLength = r.data.data.content.length
      })
    },
    oFn1 (x) {
      this.parameter.type = x
    },
    oFn2 (x) {
      this.parameter.state = x
    },
    gotopage (val) {
      if (this.searchInput) {
        this.searchFinanceData(val)
      } else {
        this.parameter.index = val
      }
    },
    search () {
      this.parameter.query = this.inputVal
    },
    toPath (x) {
      this.$router.push({path: '/buyCar/DetailsPage', name: '/buyCar/DetailsPage', query: x})
      this.containerShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.cor{
  color: '#ff6f3c'
}
.container{
  width: 100%;
  background: #fff;
  padding-bottom: 50px;
  .container1{
    width: 1200px;
    margin: 0 auto;
    .banner{
      width: 100%;
      img{
        margin-top: -20px;
        display: inline;
      }
    }
    .lookup{
      width: 100%;
      .search{
        overflow: hidden;
        height: 75px;
        line-height: 75px;
        &>p{
          float: left;
          font-size: 14px;
          color: #666;
          // margin-left: -150px;
          width: 600px;
          height: 75px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &>a{
            color: #666;
            &:hover{
              color: #ff6f3c;
            };
          };
        }
        &>div{
          float: right;
          height: 38px;
          width: 340px;
          border: 1px solid #e3e3e3;
          margin-top: 20px;
          line-height: 0;
          i{
            display: block;
            float: right;
            width: 38px;
            height: 20px;
            background: url('../../../static/img/buyCar/buy_search.png') no-repeat 45% 1px;
            cursor: pointer;
            border-left: 2px solid #e3e3e3;
            margin-top: 8px;
          }
          input{
            width: 290px;
            height: 100%;
            padding-left: 10px;
            font-size: 14px;
            color: #333;
            &::-webkit-input-placeholder,&:-moz-placeholder,&::-moz-placeholder,&:-ms-input-placeholder {
              color: #999;
            }
          }
        }
      }
      .screen{
        width: 99.9%;
        .screen_box{
          width: 100%;
          height: 50px;
          line-height: 50px;;
          border: 1px solid #f2f2f2;
          div{
            width: 120px;
            text-align: center;
            color: #666;
            font-size: 14px;
            background: #fafafa;
            float: left;
          }
          ul{
            float: left;
            li{
              float: left;
              margin-left: 40px;
              width: 50px;
              text-align: left;
              cursor: pointer;
            }
          }
        }
      }
    }
    .buyListX{
      margin: 80px auto 0;
      width: 282px;
      height: 250px;
      img{
        display: block;
        margin: 0 auto;
        width: 282px;
        width: 200px;
        height: 142px;
      }
      p{
        // text-align: center;
        // color: #999;
        // font-size: 20px;
        margin: 0 auto;
        margin-top: 20px;
        color: #666;
        font-size: 18px;
        width: 200px;
        padding-left: 97px;
      }
    }
    .buyList{
      margin-top: 20px;
      zoom:1;//为了兼容IE
      &:after{
        content:"";//设置内容为空
        height:0;//高度为0
        line-height:0;//行高为0
        display:block;//将文本转为块级元素
        visibility:hidden;//将元素隐藏
        clear:both//清除浮动
      }
      .synopsis{
        padding: 10px;
        float: left;
        height: 310px;
        margin-bottom: 5px;
        cursor: pointer;
        // transform: scale(1);
        transition: box-shadow 0.5s,transform 0.5s;
        &:hover{
          box-shadow: 0px 0px 10px 3px rgba(120, 120, 120, 0.3);
          // transform: scale(1.3);
          transition: box-shadow 0.5s,transform 0.5s;
        }
        .photo{
          width: 280px;
          height: 188px;
          position: relative;
          .bg{
            width: 100%;
            height: 100%;
          }
          .license{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: rgba(0,0,0,.55);
            color: #fff;
            font-size: 14px;
            text-align: center;
          }
          .label{
            position: absolute;
            top: -5px;
            left: 10px;
          }
          .collect{
            width: 24px;
            height: 25px;
            background: rgba(0,0,0,.55);
            border-radius: 50%;
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 100;
            img{
              margin: 4px auto;
              display: block;
            }
          }
        }
        .wm{
          margin: 16px auto 0;
          width: 270px;
        }
        .brand{
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 16px;
          color: #333;
        }
        .travel{
          font-size: 14px;
          color: #666;
        }
        .auction{
          overflow: hidden;
          .numberOfPeople{
            float: left;
            font-size: 14px;
            .num{
              font-size: 18px;
              color: #ff6f3c;
            }
          }
          .startTime{
            float: right;
            line-height: 21px;
            font-size: 14px;
            .tim{
              color: #ff6f3c;
            }
          }
        }
      }
    }
    .pagination{
      margin-top: 20px;
    }
  }
}
</style>
